<!-- pages/exercise/math1.vue -->
<template>
  <view class="container">
    <scroll-view class="content" scroll-y>
      <!-- 章节列表 -->
      <view class="chapter-list">
        <view 
          v-for="(chapter, index) in chapters" 
          :key="index" 
          class="chapter-item"
          :class="{ 'even-chapter': index % 2 === 1 }"
        >
          <view class="chapter-header" @tap="toggleChapter(index)">
            <view class="chapter-left">
              <text class="chapter-icon">{{ chapterIcons[index % chapterIcons.length] }}</text>
              <text class="chapter-title">{{ chapter.title }}</text>
            </view>
            <view class="chapter-right">
              <text class="chapter-count">{{ getTotalExercises(chapter) }}题</text>
              <view class="chapter-arrow-container" :class="{ 'expanded': chapter.expanded }">
                <text class="chapter-arrow-icon">{{ chapter.expanded ? '📖' : '📘' }}</text>
              </view>
            </view>
          </view>
          
          <view class="exercise-list" v-if="chapter.expanded">
            <view 
              v-for="(exercise, eidx) in chapter.exercises" 
              :key="eidx" 
              class="exercise-item"
              @tap="goToExercise(chapter.id, exercise.id)"
            >
              <view class="exercise-info">
                <text class="exercise-title">{{ exercise.title }}</text>
                <text class="exercise-count">{{ exercise.count }}题</text>
              </view>
              <view class="exercise-right">
                <view class="exercise-tag" :class="`tag-${getDifficultyClass(eidx)}`">{{ getDifficultyTag(eidx) }}</view>
                <text class="exercise-arrow">⟩</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue';

// 章节图标
const chapterIcons = ['📊', '📈', '🔍', '🧮', '📏', '🔢', '📐', '🔄', '🔠'];

// 章节数据 - 全部为本地静态数据，无后端交互
const chapters = reactive([
  {
    id: 1,
    title: '第一章 函数与极限',
    expanded: true,
    exercises: [
      { id: 101, title: '函数', count: 45 },
      { id: 102, title: '极限定义与性质', count: 32 },
      { id: 103, title: '无穷小与无穷大', count: 28 },
      { id: 104, title: '极限运算法则', count: 50 },
      { id: 105, title: '两个重要极限', count: 35 },
      { id: 106, title: '无穷小的比较', count: 25 },
      { id: 107, title: '函数的连续性', count: 40 },
    ]
  },
  {
    id: 2,
    title: '第二章 导数与微分',
    expanded: false,
    exercises: [
      { id: 201, title: '导数的概念', count: 30 },
      { id: 202, title: '导数的计算', count: 65 },
      { id: 203, title: '高阶导数', count: 25 },
      { id: 204, title: '隐函数的导数', count: 38 },
      { id: 205, title: '微分的概念与计算', count: 42 },
    ]
  },
  {
    id: 3,
    title: '第三章 微分中值定理与导数应用',
    expanded: false,
    exercises: [
      { id: 301, title: 'Rolle定理与中值定理', count: 30 },
      { id: 302, title: 'Taylor公式', count: 40 },
      { id: 303, title: '函数的单调性', count: 25 },
      { id: 304, title: '函数的极值', count: 45 },
      { id: 305, title: '函数的最值', count: 35 },
      { id: 306, title: '曲线的凹凸性', count: 30 },
      { id: 307, title: '曲线的渐近线', count: 20 },
    ]
  },
  {
    id: 4,
    title: '第四章 不定积分',
    expanded: false,
    exercises: [
      { id: 401, title: '不定积分的概念', count: 20 },
      { id: 402, title: '换元积分法', count: 55 },
      { id: 403, title: '分部积分法', count: 45 },
      { id: 404, title: '有理函数的积分', count: 40 },
      { id: 405, title: '三角函数的积分', count: 35 },
    ]
  },
  {
    id: 5,
    title: '第五章 定积分',
    expanded: false,
    exercises: [
      { id: 501, title: '定积分的概念', count: 25 },
      { id: 502, title: '定积分的性质', count: 30 },
      { id: 503, title: '牛顿-莱布尼茨公式', count: 45 },
      { id: 504, title: '定积分的换元法', count: 35 },
      { id: 505, title: '定积分的分部积分法', count: 30 },
      { id: 506, title: '定积分的应用', count: 50 },
    ]
  },
  {
    id: 6,
    title: '第六章 多元函数微分学',
    expanded: false,
    exercises: [
      { id: 601, title: '多元函数的概念', count: 20 },
      { id: 602, title: '偏导数', count: 45 },
      { id: 603, title: '全微分', count: 30 },
      { id: 604, title: '复合函数的求导法则', count: 35 },
      { id: 605, title: '隐函数的求导公式', count: 25 },
      { id: 606, title: '多元函数的极值', count: 40 },
    ]
  },
  {
    id: 7,
    title: '第七章 重积分',
    expanded: false,
    exercises: [
      { id: 701, title: '二重积分的概念', count: 25 },
      { id: 702, title: '二重积分的计算', count: 55 },
      { id: 703, title: '三重积分', count: 40 },
      { id: 704, title: '重积分的应用', count: 30 },
    ]
  },
  {
    id: 8,
    title: '第八章 线面积分',
    expanded: false,
    exercises: [
      { id: 801, title: '曲线积分（第一类）', count: 30 },
      { id: 802, title: '曲线积分（第二类）', count: 35 },
      { id: 803, title: '格林公式', count: 25 },
      { id: 804, title: '曲面积分（第一类）', count: 30 },
      { id: 805, title: '曲面积分（第二类）', count: 35 },
      { id: 806, title: '高斯公式与斯托克斯公式', count: 40 },
    ]
  },
  {
    id: 9,
    title: '第九章 无穷级数',
    expanded: false,
    exercises: [
      { id: 901, title: '常数项级数的概念', count: 25 },
      { id: 902, title: '级数的审敛法', count: 45 },
      { id: 903, title: '幂级数', count: 35 },
      { id: 904, title: '函数展开成幂级数', count: 40 },
      { id: 905, title: 'Fourier级数', count: 30 },
    ]
  },
]);

// 计算章节总题数
const getTotalExercises = (chapter) => {
  return chapter.exercises.reduce((sum, ex) => sum + ex.count, 0);
};

// 获取难度标签
const getDifficultyTag = (index) => {
  const difficulties = ['基础', '进阶', '挑战', '高频', '重点'];
  return difficulties[index % difficulties.length];
};

// 获取难度标签样式类
const getDifficultyClass = (index) => {
  const classes = ['basic', 'intermediate', 'advanced', 'frequent', 'important'];
  return classes[index % classes.length];
};

// 展开/收起章节 - 纯本地操作，无后端交互
const toggleChapter = (index) => {
  chapters[index].expanded = !chapters[index].expanded;
};

// 返回上一页 - 纯本地导航，无后端交互
const goBack = () => {
  uni.navigateBack();
};

// 修改: 跳转到练习页面 - 修改为跳转到exercise/practice页面
const goToExercise = (chapterId, exerciseId) => {
  uni.navigateTo({
    url: `/pages/exercise/practice?chapterId=${chapterId}&exerciseId=${exerciseId}`
  });
};
</script>

<style>
.container {
  background-color: #f8f9fe;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  padding: 20rpx;
}

.chapter-list {
  border-radius: 15rpx;
  overflow: hidden;
}

.chapter-item {
  margin-bottom: 25rpx;
  background-color: #fff;
  border-radius: 15rpx;
  overflow: hidden;
  box-shadow: 0 3rpx 15rpx rgba(0, 0, 0, 0.05);
}

/* 更浅色的章节颜色方案 */
.chapter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx 30rpx;
  /* 更浅色的第一种渐变色 */
  background: linear-gradient(135deg, #bfdaa8, #cce2bc);
  color: #4a5d3f;
}

.even-chapter .chapter-header {
  /* 更浅色的第二种渐变色 */
  background: linear-gradient(135deg, #c1d8a4, #b3d094);
  color: #4a5d3f;
}

.chapter-left {
  display: flex;
  align-items: center;
}

.chapter-icon {
  font-size: 36rpx;
  margin-right: 15rpx;
}

.chapter-title {
  font-size: 32rpx;
  font-weight: bold;
}

.chapter-right {
  display: flex;
  align-items: center;
}

.chapter-count {
  font-size: 26rpx;
  margin-right: 20rpx;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 6rpx 15rpx;
  border-radius: 20rpx;
  color: #617954;
}

/* 替换小方块为书本图标 */
.chapter-arrow-container {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.chapter-arrow-icon {
  font-size: 36rpx;
  line-height: 1;
}

.exercise-list {
  background-color: #fff;
}

.exercise-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx 30rpx;
  border-bottom: 1px solid #f5f5f5;
}

.exercise-item:active {
  background-color: #f9f9f9;
}

.exercise-item:last-child {
  border-bottom: none;
}

.exercise-info {
  display: flex;
  flex-direction: column;
}

.exercise-title {
  font-size: 30rpx;
  margin-bottom: 8rpx;
  color: #333;
}

.exercise-count {
  font-size: 24rpx;
  color: #999;
}

.exercise-right {
  display: flex;
  align-items: center;
}

/* 为不同难度标签设置不同颜色 */
.exercise-tag {
  font-size: 22rpx;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
  margin-right: 20rpx;
}

.tag-basic {
  color: #7fa663;
  border: 1px solid #c1d8a4;
  background-color: rgba(193, 216, 164, 0.2);
}

.tag-intermediate {
  color: #739455;
  border: 1px solid #b3d094;
  background-color: rgba(179, 208, 148, 0.2);
}

.tag-advanced {
  color: #6a8d50;
  border: 1px solid #a5c485;
  background-color: rgba(165, 196, 133, 0.2);
}

.tag-frequent {
  color: #617954;
  border: 1px solid #9fb980;
  background-color: rgba(159, 185, 128, 0.2);
}

.tag-important {
  color: #536747;
  border: 1px solid #93ad76;
  background-color: rgba(147, 173, 118, 0.2);
}

.exercise-arrow {
  color: #ccc;
  font-size: 36rpx;
}
</style>